<template>
  <div class="chart-wrapper" ref="morePointMap"></div>
</template>

<script>
import echarts from "echarts";
import { onMounted, onBeforeUnmount, ref } from "vue";
import { debounce, getGeoJson, getMapInfo } from "@/utils/index.js";
import { selectCityData } from "@/api/chart";

export default {
  name: "morePointMap",
  setup(props, context) {
    let myChart = ref(null);
    let geoJson = ref(null);
    const morePointMap = ref(null);
    const resizeHandler = debounce(() => {
      if (myChart) {
        myChart.resize();
      }
    }, 200);

    onMounted(() => {
      getMapJson();
      window.addEventListener("resize", resizeHandler);
    });
    onBeforeUnmount(() => {
      window.removeEventListener("resize", resizeHandler);
    });

    //通过高德获取geoJson数据
    const getMapJson = async () => {
      geoJson.value = await getGeoJson("100000");
      getMapData();
    };

    //模拟接口，获取echarts数据
    const getMapData = async () => {
      const data = await getMapInfo("100000");

      let mapData = data.map((item, index) => {
        return {
          name: item.name,
          value: [
            item.center.lng,
            item.center.lat,
            parseFloat((Math.random(0, 1) * 40 + 15).toFixed()),
          ],
        };
      });
      mapData = mapData.sort((a, b) => {
        return b.value[2] - a.value[2];
      });
      initEcharts(mapData);
    };

    const initEcharts = (data) => {
      myChart = echarts.init(morePointMap.value);
      echarts.registerMap("china", geoJson.value);
      myChart.setOption(
        {
          tooltip: {
            trigger: "item",
            formatter: (p) => {
              let val = p.value[2];
              if (window.isNaN(val)) {
                val = 0;
              }
              let txtCon = p.name + "：" + val.toFixed();
              return txtCon;
            },
          },
          title: {
            show: true,
            left: "center",
            top: "18",
            text: "散点图",
            textStyle: {
              color: "rgb(179, 239, 255)",
              fontSize: 16,
            },
          },
          toolbox: {
            feature: {
              restore: {
                show: false,
              },
              dataView: {
                show: false,
              },
              saveAsImage: {
                show: false,
              },
              dataZoom: {
                show: false,
              },
              magicType: {
                show: false,
              },
              myTool1: {
                show: true,
                title: "热力图",
                icon:
                  "image://",
                onclick() {
                  sendMap("hotMap");
                },
              },
              myTool2: {
                show: true,
                title: "散点图",
                icon:
                  "image://",
                onclick() {
                  sendMap("pointMap");
                },
              },
            },
            itemSize: 20,
            iconStyle: {
              normal: {
                borderColor: "#1990DA",
              },
              emphasis: {
                color: "#d5dfe8",
              },
            },
            top: 25,
            right: 15,
          },
          geo: {
            show: true,
            map: "china",
            roam: true,
            center: ["104.53531246", "33.5267395887"],
            itemStyle: {
              normal: {
                borderColor: "rgba(147, 235, 248, 1)",
                borderWidth: 1,
                areaColor: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 0.8,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(147, 235, 248, .1)", // 100% 处的颜色
                    },
                  ],
                },
                shadowColor: "rgba(128, 217, 248, 1)",
                shadowOffsetX: -2,
                shadowOffsetY: 2,
                shadowBlur: 10,
              },
              emphasis: {
                show: false,
                areaColor: "rgba(0,0,0,0)",
              },
            },
            label: {
              normal: {
                show: true,
                color: "rgb(249, 249, 249)", //省份标签字体颜色
                formatter: (p) => {
                  switch (p.name) {
                    case "内蒙古自治区":
                      p.name = "内蒙古";
                      break;
                    case "西藏自治区":
                      p.name = "西藏";
                      break;
                    case "新疆维吾尔自治区":
                      p.name = "新疆";
                      break;
                    case "宁夏回族自治区":
                      p.name = "宁夏";
                      break;
                    case "广西壮族自治区":
                      p.name = "广西";
                      break;
                    case "香港特别行政区":
                      p.name = "香港";
                      break;
                    case "澳门特别行政区":
                      p.name = "澳门";
                      break;
                    default:
                      break;
                  }
                  return p.name;
                },
              },
              emphasis: {
                show: true,
                color: "rgb(249, 249, 249)", //省份标签字体颜色
              },
            },
            zoom: 1.3,
          },
          series: [
            {
              name: "散点",
              type: "scatter",
              data: data.slice(5),
              coordinateSystem: "geo",
              symbolSize: function(val) {
                let value = val[2] / 3;
                return value;
              },
              label: {
                normal: {
                  show: false,
                },
                emphasis: {
                  show: false,
                },
              },
              itemStyle: {
                normal: {
                  color: "#05C3F9", //地图点的颜色
                  shadowBlur: 10,
                  shadowColor: "rgb(58,115,192)",
                },
              },
              layoutCenter: ["50%", "50%"], //属性定义地图中心在屏幕中的位置，一般结合layoutSize 定义地图的大小
              layoutSize: 430,
            },
            {
              name: "散点",
              type: "scatter",
              coordinateSystem: "geo",
              symbol: "pin",
              symbolSize: function(val) {
                let value = val[2];
                return value;
              },
              label: {
                normal: {
                  show: true,
                  formatter: (params) => {
                    return params.value[2].toFixed();
                  },
                  textStyle: {
                    color: "#fff",
                    fontSize: 9,
                  },
                },
              },
              itemStyle: {
                normal: {
                  color: "#F62157",
                },
              },
              zlevel: 6,
              data: data.slice(5),
            },
            {
              name: "top5",
              type: "effectScatter",
              data: data.slice(0, 5),
              coordinateSystem: "geo",
              symbolSize: function(val) {
                let value = val[2] / 3;
                return value;
              },
              showEffectOn: "render",
              rippleEffect: {
                brushType: "stroke",
              },
              hoverAnimation: true,
              label: {
                normal: {
                  show: false,
                },
                emphasis: {
                  show: false,
                },
              },
              itemStyle: {
                normal: {
                  color: "#FFA04A", //地图点的颜色
                  shadowBlur: 10,
                  shadowColor: "rgb(58,115,192)",
                },
              },
              layoutCenter: ["50%", "50%"], //属性定义地图中心在屏幕中的位置，一般结合layoutSize 定义地图的大小
              layoutSize: 430,
            },
            {
              name: "top5",
              type: "scatter",
              coordinateSystem: "geo",
              symbol: "pin",
              symbolSize: function(val) {
                let value = val[2];
                return value;
              },
              label: {
                normal: {
                  show: true,
                  formatter: (params) => {
                    return params.value[2].toFixed();
                  },
                  textStyle: {
                    color: "#fff",
                    fontSize: 9,
                  },
                },
              },
              itemStyle: {
                normal: {
                  color: "#1DE9B6",
                },
              },
              zlevel: 6,
              data: data.slice(0, 5),
            },
          ],
        },

        true
      );
    };

    const sendMap = (val) => {
      context.emit("changeMap", val);
    };

    return {
      morePointMap,
      myChart,
    };
  },
};
</script>
